<template>
  <el-dialog
    title="选择预约时间"
    :visible.sync="dialogAppVisible"
    :destroy-on-close="true"
    width="50%"
    :before-close="handleClose">
    <el-form class="rule-form" ref="form" :model="ruleForm" :rules="rules" style="margin-top:40px">
      <el-form-item label="医院" label-width="110px" prop="hospitalCode">
        <el-select style="width:100%" size="small" v-model="ruleForm.hospitalCode" placeholder="请选择规则字典的字段" filterable clearable>
          <el-option
            v-for="item in mx_hospitalList"
            :key="item.code"
            :label="item.name"
            :value="item.code"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="患者ID" label-width="110px" prop="patientId">
        <el-input size="small" v-model="ruleForm.patientId" clearable></el-input>
      </el-form-item>
      <el-form-item label="患者姓名" label-width="110px" prop="patName">
        <el-input size="small" v-model="ruleForm.patName" clearable></el-input>
      </el-form-item>
      <el-form-item label="患者性别" label-width="110px" prop="patSex">
        <el-select style="width:100%" size="small" v-model="ruleForm.patSex" placeholder="请选择" clearable>
          <el-option
            v-for="item in options.genderOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="患者年龄" label-width="110px" prop="patAge">
        <el-input-number style="width:187px" size="small" v-model="ruleForm.patAge" :min="1"></el-input-number>
      </el-form-item>
      <el-form-item label="患者类型" label-width="110px" prop="patType">
        <el-select style="width:100%" size="small" v-model="ruleForm.patType" placeholder="请选择" clearable>
          <el-option
            v-for="item in options.patTypeOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="价格" label-width="110px" prop="price">
        <el-input-number style="width:187px" size="small" v-model="ruleForm.price" :min="1"></el-input-number>
      </el-form-item>
      <el-form-item label="检查部门" label-width="110px" prop="dep">
        <el-select style="width:100%" size="small" v-model="ruleForm.dep" placeholder="请选择" @change="changeDep" clearable>
          <el-option
            v-for="item in options.depOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="检查部位" label-width="110px" prop="examListArr">
        <el-select style="width:100%" size="small" multiple v-model="ruleForm.examListArr" placeholder="请选择" @change="changeDep" clearable>
          <el-option
            v-for="item in examOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="检查类型" label-width="110px" prop="checkType">
        <el-select style="width:100%" size="small" v-model="ruleForm.checkType" placeholder="请选择" clearable>
          <el-option
            v-for="item in options.checkTypeOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="检查设备" label-width="110px" prop="modality">
        <el-input size="small" v-model="ruleForm.modality" clearable></el-input>
      </el-form-item>
      <el-form-item label="阴阳值" label-width="110px" prop="positive">
        <el-select style="width:100%" size="small" v-model="ruleForm.positive" placeholder="请选择" clearable>
          <el-option
            v-for="item in options.positiveOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="收费类型" label-width="110px" prop="chargeType">
        <el-select style="width:100%" size="small" v-model="ruleForm.chargeType" placeholder="请选择" clearable>
          <el-option
            v-for="item in options.checkTypeOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="收费状态" label-width="110px" prop="chargeStatus">
        <el-select style="width:100%" size="small" v-model="ruleForm.chargeStatus" placeholder="请选择" clearable>
          <el-option
            v-for="item in options.checkStatusOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="预约时间" label-width="110px" prop="appointmentDateBegin">
        <el-date-picker
          size="small"
          style="width:187px"
          v-model="ruleForm.appointmentDateBegin"
          type="date"
          placeholder="选择日期时间">
        </el-date-picker>
        <el-date-picker
          size="small"
          style="width:187px"
          v-model="ruleForm.appointmentDateEnd"
          type="date"
          placeholder="选择日期时间">
        </el-date-picker>
      </el-form-item>

    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary" @click="handleConfirm">确 定</el-button>
    </span>
  </el-dialog>
</template>
<script>
import { Options } from '@/utils/constant'
import { chooseAppointment, getDengjipartList } from '@/api/api.js'

export default {
  name: 'SelectAppDialog',
  props: {
    dialogAppVisible: {
      default: false,
      type: Boolean
    }
  },
  data() {
    return {
      options: Options,
      ruleForm: {
        hospitalCode: '',
        patientId: '',
        patName: '',
        patSex: '',
        patAge: '',
        patType: '',
        price: '',
        checkType: '',
        modality: '',
        positive: '',
        chargeType: '',
        chargeStatus: '',
        appointmentDateBegin: '',
        appointmentDateEnd: '',
        dep: '',
        examListArr: [], // 检查部位
        feeList: [
          {
            feeName: 'string',
            feeCode: 'string',
            itemPrice: 0,
            itemNumber: 0,
            sbxh: 'string',
            xmbh: 'string',
            examNo: 'string',
            fplsh: 'string',
            jcxh: 'string'
          }
        ]
      },
      rules: {
        hospitalCode: [{ required: true, message: '请选择医院', trigger: 'blur' }],
        patientId: [{ required: true, message: '请输入id', trigger: 'blur' }],
        patName: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
        patSex: [{ required: true, message: '请选择性别', trigger: 'blur' }],
        patAge: [{ required: true, message: '请输入年龄', trigger: 'blur' }],
        patType: [{ required: true, message: '请选择检查类型', trigger: 'blur' }],
        price: [{ required: true, message: '请输入价格', trigger: 'blur' }],
        dep: [{ required: true, message: '请选择检查部门', trigger: 'blur' }],
        checkType: [{ required: true, message: '请选择检查类型', trigger: 'blur' }],
        modality: [{ required: true, message: '请输入设备', trigger: 'blur' }],
        positive: [{ required: true, message: '请选择阴阳值', trigger: 'blur' }],
        chargeType: [{ required: true, message: '请选择收费类别', trigger: 'blur' }],
        chargeStatus: [{ required: true, message: '请选择收费状态', trigger: 'blur' }],
        appointmentDateBegin: [{ required: true, message: '请选择预约时间', trigger: 'blur' }],
        appointmentDateEnd: [{ required: true, message: '请选择预约时间', trigger: 'blur' }]
      },
      examOptions: []//
    }
  },
  watch: {
    'dialogAppVisible': {
      immediate: true,
      handler(val) {
        if (val) {
          this.init()
        }
      }
    }
  },
  methods: {
    init() {
      this.$getHospitalList()
      this.ruleForm.hospitalCode = this.mx_hospitalList[0].code || ''
    },
    handleClose() {
      this.$emit('myClose')
    },
    changeDep() {
      // let data = {...this.ruleForm}
      // let dep = data.depArr.join(',')
      getDengjipartList({ Dep: this.ruleForm.dep }).then(res => {
        if (res && res.code === 10000) {
          if (res.content.list.length !== 0) {
            this.examOptions = res.content.list.map(item => {
              return { label: item, value: item }
            })
            this.examOptions.push({ label: '上腹部CT平扫', value: '上腹部CT平扫' })
          }
        }
      })
    },
    handleConfirm() {
      let data = { ...this.ruleForm }
      // data.dep = data.depArr.join(',')
      data.examList = data.examListArr.map(item => {
        return {
          dengjipart: item
        }
      })
      delete data.examListArr
      chooseAppointment(data).then(res => {
        if (res && res.code === 10000) {
          this.$message.success('成功添加')
        }
      })
      this.handleClose()
    }
  }
}
</script>
<style lang="sass" scoped>

</style>
